<template>
	<!--总容器-->
	<div class="wrapper">
		<!--header部分-->
		<header>
			<li class="header">
				<div class="icon-location-box">
				<div class="icon-location"></div>
				</div>
				<div class="location-text" @click="showLocation()">{{location.name==''?"请输入您当前的地址":location.name}}<i class="fa fa-caret-down"></i></div>
			</li>
			<div class="changeLocation" v-show="isShowLocation">
				<input type="text" v-model="locationTmp" placeholder="请输入您当前的地址">
				<button @click="setLocation()">确认</button>
			</div>
		</header>

		<!--search部分-->
		<div class="search">
			<div class="search-fixed-top" ref="fixedBox">
				<div class="search-box" @click="toSearch()">
					<i class="fa fa-search"></i>搜索饿了么商家名称、商家地址
				</div>
			</div>
		</div>


		<!--点餐分类部分-->
		<ul class="foodtype">
			<li @click="toBusinessList(1)">
				<img src="../assets/dcfl01.png">
				<p>美食</p>
			</li>
			<li @click="toBusinessList(2)">
				<img src="../assets/dcfl02.png">
				<p>早餐</p>
			</li>
			<li @click="toBusinessList(3)">
				<img src="../assets/dcfl03.png">
				<p>跑腿代购</p>
			</li>
			<li @click="toBusinessList(4)">
				<img src="../assets/dcfl04.png">
				<p>汉堡披萨</p>
			</li>
			<li @click="toBusinessList(5)">
				<img src="../assets/dcfl05.png">
				<p>甜品饮料</p>
			</li>
			<li @click="toBusinessList(6)">
				<img src="../assets/dcfl06.png">
				<p>速食简餐</p>
			</li>
			<li @click="toBusinessList(7)">
				<img src="../assets/dcfl07.png">
				<p>地方小吃</p>
			</li>
			<li @click="toBusinessList(8)">
				<img src="../assets/dcfl08.png">
				<p>米粉面馆</p>
			</li>
			<li @click="toBusinessList(9)">
				<img src="../assets/dcfl09.png">
				<p>包子粥铺</p>
			</li>
			<li @click="toBusinessList(10)">
				<img src="../assets/dcfl10.png">
				<p>炸鸡炸串</p>
			</li>
		</ul>

		<!--横幅广告部分-->
		<div class="banner">
			<h3>品质套餐</h3>
			<p>搭配齐全吃得好</p>
			<a>立即抢购 &gt;</a>
		</div>

		<!--超级会员部分-->
		<div class="supermember">
			<div class="s-left">
				<img src="../assets/super_member.png">
				<h3>超级会员</h3>
				<p>&#8226; 每月享超值权益</p>
			</div>
			<div class="s-right">
				立即开通 &gt;
			</div>
		</div>

		<!--推荐商家部分-->
		<div class="recommend">
			<div class="recommend-line"></div>
			<p>推荐商家</p>
			<div class="recommend-line"></div>
		</div>

		<!--推荐方式部分-->
		<ul class="recommendtype">
			<li @click="sortByScore()">综合排序<i class="fa fa-caret-down" v-show="isShow==1"></i></li>
			<li @click="sortByDistance()">距离最近<i class="fa fa-caret-down" v-show="isShow==2"></i></li>
			<li @click="sortBySale()">销量最高<i class="fa fa-caret-down" v-show="isShow==3"></i></li>
			<li @click="showFilter()">筛选<i class="fa fa-filter"></i></li>
		</ul>
		<ul class="filterOptions" v-show="isShowFilter">
			<li class="distanceFilter">
				<p>距离不超过：</p>
				<div>
					<input type="text" v-model="mostDistancetmp" placeholder="距离">
					<button @click="filterByDistance()">确认</button>
				</div>
			</li>
			<li class="cancelFilter" @click="cancelFilter()">取消筛选</li>
		</ul>

		<!--推荐商家列表部分-->
		<ul class="business" v-show="!isFilter">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
				<img :src="item.businessImg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>{{item.businessName}}</h3>
						<div class="business-info-like">&#8226;</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star" v-show="item.score>0.5"></i>
							<i class="fa fa-star" v-show="item.score>1.5"></i>
							<i class="fa fa-star" v-show="item.score>2.5"></i>
							<i class="fa fa-star" v-show="item.score>3.5"></i>
							<i class="fa fa-star" v-show="item.score>4.5"></i>
							<p>{{item.score}} 月售{{item.sale}}单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
						<p>{{Math.abs(item.distance-location.distance)}}km | {{item.distance*item.distance+5}}分钟</p>
					</div>
					<div class="business-info-explain">
						<div>{{item.businessExplain}}</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">特</div>
							<p>特价商品五元起</p>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<ul class="business" v-show="isFilter">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)"
				v-show="Math.abs(item.distance-location.distance) <= mostDistance">
				<img :src="item.businessImg">
				<div class="business-info">
					<div class="business-info-h">
						<h3>{{item.businessName}}</h3>
						<div class="business-info-like">&#8226;</div>
					</div>
					<div class="business-info-star">
						<div class="business-info-star-left">
							<i class="fa fa-star" v-show="item.score>0.5"></i>
							<i class="fa fa-star" v-show="item.score>1.5"></i>
							<i class="fa fa-star" v-show="item.score>2.5"></i>
							<i class="fa fa-star" v-show="item.score>3.5"></i>
							<i class="fa fa-star" v-show="item.score>4.5"></i>
							<p>{{item.score}} 月售{{item.sale}}单</p>
						</div>
						<div class="business-info-star-right">
							蜂鸟专送
						</div>
					</div>
					<div class="business-info-delivery">
						<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
						<p>{{Math.abs(item.distance-location.distance)}}km | {{item.distance*item.distance+5}}分钟</p>
					</div>
					<div class="business-info-explain">
						<div>{{item.businessExplain}}</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="business-info-promotion-right">
							<p>2个活动</p>
							<i class="fa fa-caret-down"></i>
						</div>
					</div>
					<div class="business-info-promotion">
						<div class="business-info-promotion-left">
							<div class="business-info-promotion-left-incon">特</div>
							<p>特价商品五元起</p>
						</div>
					</div>
				</div>
			</li>
		</ul>

		<!--底部菜单部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		getCurrentInstance
	} from 'vue';
	import Footer from '../components/Footer.vue';
	import {
		useRouter
	} from 'vue-router'

	export default {
		name: 'Index',
		components: {
			Footer,
		},
		setup() {
			const currentInstance = getCurrentInstance();
			const router = useRouter();
			const businessArr = ref([]);
			const orderTypeId = 1;
			const isShow = ref(1);
			const mostDistance = ref();
			const mostDistancetmp = ref();
			const isShowFilter = ref(false);
			const isFilter = ref(false);
			const locationTmp = ref('');
			const isShowLocation = ref(false);
			const location = ref({
				name:'',
				distance:0
			})
			const showLocation = () =>{
				isShowLocation.value = !isShowLocation.value;
			}
			const setLocation = () =>{
				location.value.name = locationTmp.value;
				location.value.distance = locationTmp.value.length;
				currentInstance.appContext.config.globalProperties.$setSessionStorage('location',location.value);
				isShowLocation.value = false;
			}
			const toBusinessList = (orderTypeId) => {
				router.push({
					name: 'BusinessList',
					params: {
						orderTypeId: orderTypeId
					}
				});
			};
			const toBusinessInfo = (businessId) => {
				router.push({
					name: 'BusinessInfo',
					params: {
						businessId: businessId
					}
				});
			};
			
			function toSearch() {
				router.push({
					path: '/search'
				});
			}

			function sortByScore() {
				isShow.value = 1;
				businessArr.value.sort((a, b) => b.score - a.score);
			}

			function sortByDistance() {
				isShow.value = 2;
				businessArr.value.sort((a, b) => Math.abs(a.distance-location.value.distance) - Math.abs(b.distance-location.value.distance));
			}

			function sortBySale() {
				isShow.value = 3;
				businessArr.value.sort((a, b) => b.sale - a.sale);
			}

			function showFilter() {
				isShowFilter.value = !isShowFilter.value;
			}

			function filterByDistance() {
				if (mostDistancetmp.value < 0) {
					alert("距离不能小于零！");
					return;
				}
				mostDistance.value = mostDistancetmp.value;
				isFilter.value = true;

			}

			function cancelFilter() {
				isFilter.value = false;
				isShowFilter.value = false;
			}
			const handleScroll = () => {
				let s1 = document.documentElement.scrollTop;
				let s2 = document.body.scrollTop;
				let scroll = s1 == 0 ? s2 : s1;
				// 获取视口宽度
				let width = document.documentElement.clientWidth;
				// 获得顶部固定块的引用
				let search = fixedBox.value; // 使用 ref 创建响应式引用

				// 判断滚动条超过视口宽度12%时，搜索块变固定定位
				if (scroll > width * 0.12) {
					search.style.position = 'fixed';
					search.style.left = '0';
					search.style.top = '0';
				} else {
					search.style.position = 'static';
				}
			};

			// 使用 onMounted 替代 mounted 钩子函数
			onMounted(() => {
				if(currentInstance.appContext.config.globalProperties.$getSessionStorage('location')!=null){
					location.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('location');
				}
				document.addEventListener('scroll', handleScroll);
				for (let i = 1; i <= 10; i++) {
					// 根据orderTypeId查询商家信息
					currentInstance.appContext.config.globalProperties.$axios.post(
							'BusinessController/listBusinessByOrderTypeId', currentInstance.appContext.config
							.globalProperties.$qs.stringify({
								orderTypeId: i
							}))
						.then(response => {
							businessArr.value = businessArr.value.concat(response.data);
							businessArr.value.sort((a, b) => b.score - a.score);
						})
						.catch(error => {
							console.error(error);
						});
				}
				

			});


			// 使用 onBeforeUnmount 替代 destroyed 钩子函数
			onBeforeUnmount(() => {
				document.removeEventListener('scroll', handleScroll);
			});

			// 使用 ref 创建响应式引用
			const fixedBox = ref(null);


			// 返回模板中需要的数据和方法
			return {
				fixedBox,
				toBusinessList,
				businessArr,
				orderTypeId,
				toBusinessInfo,
				toSearch,
				sortByScore,
				sortByDistance,
				sortBySale,
				isShow,
				mostDistance,
				isShowFilter,
				filterByDistance,
				showFilter,
				cancelFilter,
				isFilter,
				mostDistancetmp,
				location,
				locationTmp,
				setLocation,
				isShowLocation,
				showLocation
			};
		},
	};
</script>

<style scoped>
	/*********************总容器******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	.wrapper .filterOptions {
		width: 100%;
		margin: 2vw 0;

	}

	.wrapper .filterOptions li {
		font-size: 3, 5vw;
		color: #555;
		margin: 2vw 5vw;
		border-bottom: solid 1px #DDD;
	}

	.wrapper .filterOptions .distanceFilter {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wrapper .filterOptions .cancelFilter {
		user-select: none;
		cursor: pointer;
	}

	/**********************header*******************/
	.wrapper header .header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.wrapper header .header .icon-location-box {
		width: 3.5vw;
		height: 3.5vw;
		margin: 0 1vw 0 3vw;
	}

	.wrapper header .header .icon-location-box .icon-location {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50% 50% 50% 0;
		background: #FFFFFF;
		transform: rotate(-45deg);
	}

	.wrapper header .header .icon-location-box .icon-location:after {
		content: '';
		width: 40%;
		height: 40%;
		margin: 30% 0 0 29%;
		background-color: #0097ff;
		position: absolute;
		border-radius: 50%;
	}

	.wrapper header .header .location-text {
		font-size: 4.5vw;
		font-weight: 700;
		color: #fff;
	}

	.wrapper header .header .location-text .fa-caret-down {
		margin-left: 1vw;
	}
	
	.wrapper header .changeLocation{
		box-sizing: border-box;
		padding-left: 5vw;
		background-color: #0097ff;
	}
	.wrapper header .changeLocation input{
		height: 3.8vw;
		width: 85%;
	}

	/*********************search*******************/
	.wrapper .search {
		width: 100%;
		height: 13vw;
	}

	.wrapper .search .search-fixed-top {
		width: 100%;
		height: 13vw;
		background-color: #0097FF;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.wrapper .search .search-fixed-top .search-box {
		width: 90%;
		height: 9vw;
		background-color: #fff;
		border-radius: 2px;

		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 3.5vw;
		color: #AEAEAE;
		font-family: "宋体";

		/*****保证文字无法选中*****/
		user-select: none;
	}

	.wrapper .search .search-fixed-top .search-box .fa-search {
		margin-right: 1vw;
	}

	/*********************点餐分类部分*******************/
	.wrapper .foodtype {
		width: 100%;
		height: 48vw;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: center;
	}

	.wrapper .foodtype li {
		width: 18vw;
		height: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		user-select: none;
		cursor: pointer;
	}

	.wrapper .foodtype li img {
		width: 12vw;
		height: 10.3vw;
	}

	.wrapper .foodtype li p {
		font-size: 3.2vw;
		color: #666;
	}

	/*********************横幅广告部分*******************/
	.wrapper .banner {
		width: 95%;
		margin: 0 auto;
		height: 29vw;

		background-image: url(../assets/index_banner.png);
		background-repeat: no-repeat;
		background-size: cover;

		box-sizing: border-box;
		padding: 2vw 6vw;
	}

	.wrapper .banner h3 {
		font-size: 4.2vw;
		margin-bottom: 1.2vw;
	}

	.wrapper .banner p {
		font-size: 3.4vw;
		color: #666;
		margin-bottom: 2.4vw;
	}

	.wrapper .banner a {

		font-size: 3vw;
		color: #C79060;
		font-weight: 700;
	}

	/*********************超级会员部分*******************/
	.wrapper .supermember {
		width: 95%;
		margin: 0 auto;
		height: 11.5vw;
		background-color: #FEEDC1;
		margin-top: 1.3vw;
		border-radius: 2px;
		color: #644F1B;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .supermember .s-left {
		display: flex;
		align-items: center;
		margin-left: 4vw;
		user-select: none;
	}

	.wrapper .supermember .s-left img {
		width: 6vw;
		height: 6vw;
		margin-right: 2vw;
	}

	.wrapper .supermember .s-left h3 {
		font-size: 4vw;
		margin-right: 2vw;
	}

	.wrapper .supermember .s-left p {
		font-size: 3vw;
	}

	.wrapper .supermember .s-right {
		font-size: 3vw;
		margin-right: 4vw;
		cursor: pointer;
	}

	/*********************推荐商家部分*******************/
	.wrapper .recommend {
		width: 100%;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .recommend .recommend-line {
		width: 6vw;
		height: 0.2vw;
		background-color: #666;
	}

	.wrapper .recommend p {
		font-size: 4vw;
		margin: 0 4vw;
	}

	/*********************推荐方式部分*******************/
	.wrapper .recommendtype {
		width: 100%;
		height: 5vw;
		margin-bottom: 5vw;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.wrapper .recommendtype li {
		font-size: 3, 5vw;
		color: #555;
		user-select: none;
		cursor: pointer;
	}

	/*********************推荐商家列表部分*******************/
	.wrapper .business {
		box-sizing: border-box;
		padding-bottom: 14vw;
		width: 100%;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;
		border-bottom: solid 1px #DDD;

		display: flex;
	}

	.wrapper .business li img {
		width: 18vw;
		height: 18vw;
	}

	.wrapper .business li .business-info {
		width: 100%;
		box-sizing: border-box;
		padding-left: 3vw;

	}

	.wrapper .business li .business-info .business-info-h {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}

	.wrapper .business li .business-info .business-info-h h3 {
		font-size: 4vw;
		color: #333;
	}

	.wrapper .business li .business-info .business-info-h .business-info-like {
		width: 1.6vw;
		height: 3.4vw;
		background-color: #666;
		color: #fff;
		font-size: 4vw;
		margin-right: 4vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-star {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
		font-size: 3.1vw;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left {
		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star {
		color: #FEC80E;
		margin-right: 0.5vw;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-left p {
		color: #666;
		margin-left: 1vw;
	}

	.wrapper .business li .business-info .business-info-star .business-info-star-right {
		background-color: #0097FF;
		color: #fff;
		font-size: 2.4vw;
		border-radius: 2px;
		padding: 0 0.6vw;
	}

	.wrapper .business li .business-info .business-info-delivery {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;

		color: #666;
		font-size: 3.1vw;
	}

	.wrapper .business li .business-info .business-info-explain {
		display: flex;
		align-items: center;
		margin-bottom: 3vw;
	}

	.wrapper .business li .business-info .business-info-explain div {
		border: solid 1px #DDD;
		font-size: 2.8vw;
		color: #666;
		border-radius: 3px;
		padding: 0 0.1vw;
	}

	.wrapper .business li .business-info .business-info-promotion {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.8vw;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left {
		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon {
		width: 4vw;
		height: 4vw;
		background-color: #70BC46;
		border-radius: 3px;
		font-size: 3vw;
		color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p {
		color: #666;
		font-size: 3vw;
		margin-left: 2vw;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right {
		display: flex;
		align-items: center;
		font-size: 2.5vw;
		color: #999;
	}

	.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p {
		margin-right: 2vw;
	}
</style>